<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.demo{
			position: relative;
			width: 400px;
			height: 400px;
			margin: 100px auto 0;
			border:1px solid;
			border-radius: 50%;
		}
		.demo .dot{
			position: absolute;
			top: 200px;
			left: 400px;
			width: 10px;
			height: 10px;
			margin-top: -5px;
			margin-left: -5px;
			background-color: #f00;
			border-radius: 50%;
		}
	</style>
</head>
<body>
   	<div class="demo">
   		<div class="dot"></div>
   	</div>
</body>
	<script>
		var	oDot = document.getElementsByClassName('dot')[0],
			r = 200,
			deg = 0;

		function circle() {
			deg=deg-6;
			var _left = r + Math.cos(Math.PI / 180 * deg) * r,
				_top = r - Math.sin(Math.PI / 180 * deg) * r;
			
			oDot.style.left = _left+'px';
			oDot.style.top = _top+'px';
			
		}
		 setInterval(circle,1000/60);
		</script>
</html>